<template>
  <div>
    <el-button @click="dian">点击</el-button>
    <!--动画引入animate.css库,icon引入font-awesome图标库  -->
    <div class="animBox">
      <vue-star animate="animate__animated animate__wobble" color="#F05654">
        <i
          slot="icon"
          class="iconfont icon-shangchuan"
          @click="handleClick"
        ></i>
      </vue-star>

      <vue-star animate="animate__animated animate__swing" color="#3eda18">
        <i slot="icon" class="iconfont icon-iconfontriyongbaihuo"></i>
      </vue-star>

      <vue-star animate="animate__animated animate__rubberBand" color="#3d85e4">
        <i slot="icon" class="iconfont icon-iconfontshipin"></i>
      </vue-star>

      <vue-star animate="animate__animated animate__bounce" color="#e0a72a">
        <i slot="icon" class="iconfont icon-rili"></i>
      </vue-star>

      <vue-star
        animate="animate__animated animate__lightSpeedInLeft"
        color="#986523"
      >
        <i slot="icon" class="iconfont icon-meiguoguoqi"></i>
      </vue-star>
    </div>

    <!-- echarts -->
    <div id="main">

    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  // 此时页面上的元素已被渲染完毕
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  },
  methods: {
    dian() {
      let a = document.body;
      a.style.cursor = "progress";

      setTimeout(() => {
        a.style.cursor = "";
        // a.style.cursor = "default"
        console.log(a.style.cursor, "aaa");
      }, 3000);
    },
    handleClick() {
      console.log("1");
    },
  },
};
</script>

<style lang="scss" scoped>
.animBox {
  display: flex;
}
.VueStar {
  position: unset;
  .iconfont {
    font-size: 30px;
    cursor: pointer;
    // color: #e0a72a;
  }
}

// echarts
#main{
    width: 500px;
    height: 300px;
}
</style>
